<template>
	<view class="content">
		
		<view class="wrap" ref="backTop">
			<uv-back-top :scroll-top="scrollTop"></uv-back-top>
		</view>
		
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular   :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(x,y) in swiper" :key="y">
					<!-- <view>{{x.id}}</view> -->
					<view class="SwiImg">
						<image :src="x.img"></image>
					</view>
				</swiper-item>

			</swiper>
		</view>
		<view class="fff">
			<view class="dflet">
				<view class="home" v-for="(home,i) in arr" :key="i" @click="homepage(arrAll[i])">
					<view class="img">
						<image :src="home.img"></image>
					</view>
					<view class="font">
						<view>{{home.name}}</view>
						<view>{{home.mname}}</view>
					</view>
				</view>
			</view>
			<!-- 推荐机构 -->
			<view>
				<!--  -->
				<view class="TunJian" @click="organ">
					<view>推荐机构</view>
					<view>更多</view>
				</view>
				<!-- 推荐机构图片 -->
				<view class="combo">
					<!--   -->
					<view v-for="(items,v) in combo" class="comkuang" :key="v">
						<viw class="comboImage">
							<!-- <image :src='items.imageUrl[0]'></image> -->
							<!-- 	<image src="../../static/logo.png" mode=""></image> -->
						</viw>
						<view class="size">{{items.subOrganName}}</view>
						<view style="color: #59B58D;">{{items.packageCount}}套餐</view>
					</view>

				</view>
			</view>

			<!-- 推荐套餐 -->
			<view>
				<view @click="packages">
					<view class="TunJian">
						<view>推荐套餐</view>
						<view>更多</view>
					</view>
				</view>
				<view class="setcom">
					<!--   -->
					<view @click="getSetMeal(item.id)" v-for="(item,k) in SetmealCom" class="setkung" :key="k">
						<viw class="setImg">
							<image :src='item.imageUrl[0]'></image>
						</viw>
						<view class="fo">{{item.name}}</view>
						<view class="size fo">{{item.subOrganName}}</view>
						<view>
							<text class="fo">￥{{item.originalPrice}}</text>
							<text
								style="padding-left: 10rpx;  text-decoration: line-through;color: #959595;">{{item.currentPrice}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="text-align: center; color: #ccc;">已经到底了</view>
	</view>
</template>

<script lang="ts" setup>
		import { request } from "../../utils/request.js"
	import { reactive, ref } from "vue"
	
	import { onPageScroll } from '@dcloudio/uni-app'
	let scrollTop = ref(0)
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
		// console.log("滚动距离为：" + e.scrollTop);
	})
	
	const indicatorDots = ref(true)
	const autoplay = ref(true)
	const interval = ref(2000)
	const duration = ref(500)
	
	const swiper = [
		{ id: 1, img: ("https://t14.baidu.com/it/u=3896056253,2447675956&fm=224&app=112&f=JPEG?w=500&h=219") },
		{ id: 2, img: ("https://img0.baidu.com/it/u=2141523088,2993434350&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=500") },
		{ id: 3, img: ("https://img2.baidu.com/it/u=499476920,1148528019&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=388") },
		{ id: 4, img: ("https://res.vobao.com/res1/news/202108131556563571018972616357515330.jpg") },
	]


	// let text1 = ref('uview-plus UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用')
	// // 推荐机构
	// interface organ {
	// 	subOrganId : number,
	// 	subOrganName : String,
	// 	packageCount : Number,
	// }
	
		const combo = reactive([]);
		const getcombo = () => {
		  request("/PatientExaminationOrgan/findAll", "get")
		    .then((res) => {
		      console.log(res.data);
		    })
		    .catch((error) => {
		      console.error(error);
		    });
		};
		getcombo()
		// uni.request({
		// 	url:'http://172.16.129.95:8082/PatientExaminationOrgan/recommendSubOrganList',
		// 	success:function(res){
	 // // 
		// 		// console.log(res.data);
		// 		combo.length = 0
		// 		 const slicCoboDate = res.data.data.slice(0,3)
		// 		combo.push(...slicCoboDate)
		// 		 // combo.push(...res.data.data)
		// 	}
		// })
	

 let SetmealCom = reactive([])
	const getSetReq = () => {
		request('/pack/findAll',"get")
		.then((res) =>{
			console.log(111);
			console.log(res.data);
			SetmealCom.length = 0
			SetmealCom.push(...res.data)
		})
		.catch((error)=>{
			 console.error(error);
		})
			
	};
	getSetReq();

	const getSetMeal = (id) => {
		uni.redirectTo({
			url: '/page_checkup/detailspackage/detailspackage?id=' + id
		})
		console.log(id);
	}

	// 首页
	interface health {
		id : number,
		name : string,
		mname : string,
		img : string
	}
	const arr : health[] = [
		{ id: 0, name: '我要体检', mname: '机构套餐，随心选择', img: ("https://res.vobao.com/res1/news/202108131556563571018972616357515330.jpg") },
		{ id: 1, name: '我的预约', mname: '按需加项目更改日期', img: ("https://img.ixintu.com/download/jpg/201911/4a843afd5703f1adc99dfc11f95f49f0.jpg%21con") },
		{ id: 2, name: '我的报告', mname: '报告管理，趋势分析', img: ("https://p4.itc.cn/q_70/images01/20210701/d4195c08bc0e4b7aa9ea7d97f2220cba.jpeg") },
		{ id: 3, name: '报告解读', mname: '在线医生，答疑解惑', img: ("https://p3.itc.cn/images01/20210125/e54ce0003ea3474cbf3fd1a7c4d164f7.jpeg") }

	]
	const arrAll = ["/page_checkup/checkup_user/checkup_user", "/page_order/order_user/order_user", "/page_report/report-check/report-check", "/page_explain/explain_power/explain_power"]

	const homepage = (i) => {
		uni.navigateTo({
			url: i
		})
	}
	const organ = () => {
		uni.navigateTo({
			url: "/page_organ/organ_home/organ_home"
		})
	}
	const packages = () => {
		uni.navigateTo({
			url: "/page_package/package_type/package_type"
		})
	}

	const report = () => {

	}
</script>

<style lang="less" scoped>
	// 轮播图
	  .SwiImg{
		  width: 90%;
		  margin: auto;
		  // text-align: center;
		  height: 300rpx;
	  }
	  .SwiImg image{
		   border-radius: 20rpx;
	  			  width: 100%;
	  			  height: 100%;
	  			 background-size: cover;
	  }
	  .fff{
		  margin-top: 50rpx;
	  }
	.fo {
		padding-left: 10rpx;
	}

	.size {
		display: block;
		/* 设置为块级元素，宽度默认为父元素宽度 */
		white-space: nowrap;
		/* 不允许文本换行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		text-overflow: ellipsis;
	}

	.setkung {
		border-radius: 15rpx;
		line-height: 50rpx;
		margin-bottom: 40rpx;
		width: 330rpx;
		height: 480rpx;
		background-color: #fdfff0;
	}

	.comkuang {
		width: 200rpx;
		height: 330rpx;
	}

	.setcom {
		display: flex;
		margin: 20rpx;

		justify-content: space-between;
		flex-wrap: wrap;

		.setImg image {
			// margin-top:20rpx;
			width: 330rpx;
			height: 300rpx;
		}
	}

	.home {
		width: 350rpx;
		height: 160rpx;
		margin: 10rpx;
		border-radius: 10rpx;
		align-items: center;
		background-color: #F4F6F6;
		display: flex;

		&:hover {
			background-color: #fdfff0;
		}
	}

	.dflet {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;


	}

	.img {
		align-items: center;
		padding: 0 10rpx;
		width: 100rpx;
		height: 100rpx;

		image {
			background-repeat: repeat;
			background-size: cover;
			width: 100%;
			height: 100%;
		}
	}

	.font {
		line-height: 45rpx;
	}

	.font :first-child {
		font-size: 35rpx
	}

	.font :last-child {
		font-size: 22rpx;
		color: #848484;
	}

	.TunJian {
		display: flex;
		justify-content: space-between;
		margin: 20rpx;


		:first-child {
			font-size: 50rpx;
			// font-weight: bold;
		}

		:last-child {
			font-size: 30rpx;
			color: #59B58D;
		}
	}

	.combo {
		display: flex;
		justify-content: space-between;
		margin: 20rpx;
	}

	.comboImage image {
		width: 240rpx;
		height: 220rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>